<template>
  <div class="run-container">
    <div class="run-core">
      <el-card class="run-card">
        <el-form :inline="true" :model="params" class="demo-form-inline">

          <el-form-item label="姓名">
            <el-input v-model="params.name" placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item label="组织">
            <el-cascader
              placeholder="请选择组织"
              v-model="orgId"
              :options="options"
              @change="refresh">
            </el-cascader>
          </el-form-item>

          <el-form-item label="类型">
            <el-select v-model="params.type" placeholder="请选择类型">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.type"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="入职时间">
            <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              range-separator="至"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button type="primary" @click="queryEmp">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
<!--            <el-button type="primary" @click="exportEmp">导出</el-button>-->
          </el-form-item>

        </el-form>


        <el-table :data="page.records" stripe style="width: 100%">
          <el-table-column prop="code" label="编号" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="avatar" label="头像" min-width="6%" align="center">
            <template slot-scope="scope">
              <el-avatar :size="'medium'" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="dept" label="部门" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="position" label="岗位" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="entryTime" label="入职时间" min-width="8%" align="center"></el-table-column>

          <el-table-column label="操作" min-width="25%" align="center">
            <template slot-scope="scope">
              <el-button size="mini"  type="primary" @click="notice(scope.row.id)">通知</el-button>
              <el-button size="mini"  type="primary" @click="check(scope.row.personId)">查看</el-button>
<!--              <el-button size="mini"  type="primary" @click="edit(scope.row.id)">编辑</el-button>-->
              <el-button size="mini"  type="primary" @click="postTransfer(scope.row.id)">调岗</el-button>
              <el-button size="mini"  type="info" @click="remarkInfo(scope.row.id)">备注</el-button>
<!--              <el-button size="mini"  type="danger" @click="handleResignation(scope.row.id)">办理离职</el-button>-->
            </template>
          </el-table-column>
        </el-table>


        <el-pagination background layout="prev, pager, next"
                       :total="page.total" class="recruit-page"
                       :current-page="current" :page-size="page.size" style="margin:1rem 45%" @current-change="pageEmp">
        </el-pagination>

      </el-card>



      <el-dialog title="通知" :visible.sync="notice_flag" width="800px">
        <el-form :model="notices">
          <el-form-item label="标题" :label-width="'100px'">
            <el-input v-model="notices.subject" placeholder="请输入标题" style="width:20rem"></el-input>
          </el-form-item>
          <el-form-item label="主体" :label-width="'100px'">
            <Editor v-model="notices.text"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="noticeBtn">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="调岗" :visible.sync="organization_flag" width="400px">
        <el-form :model="organization">
          <el-form-item label="部门" :label-width="'100px'">
            <el-select v-model="organization.deptId" placeholder="请选择" @change="refresh">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位" :label-width="'100px'">
            <el-select v-model="organization.positionId" placeholder="请选择" @change="refresh">
              <el-option
                v-for="item in position"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="organizationBtn">确定调岗</el-button>
        </div>
      </el-dialog>


      <el-dialog title="备注" :visible.sync="remarks_flag" width="600px">
        <el-form :model="remark">
          <el-form-item label="主体" :label-width="'100px'">
            <Editor v-model="remark.remarks"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="remarksBtn">确 定</el-button>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import {editRemarks, getTypeList, noticeEmail, pageEmpSearch, transferPosition} from "@/api/employees";
import {orgChart} from "@/api/organization";

export default {
  data(){
    return{
      current:1,
      pageSize:10,
      id:'',
      params:{
        name:'',
        deptId:'',
        positionId:'',
        type:'',
        startTime:'',
        endTime:''
      },
      orgId:[],
      dateTime:[],
      page:{},
      notices:{},
      typeList:[],
      options:[],
      position:[],
      organization:{},
      remark:{},

      notice_flag:false,
      organization_flag:false,
      remarks_flag:false
    }
  },
  components: {
    Editor: resolve => resolve(require('@/components/editor/editor.vue'))
  },
  computed:{
    deptId(){
      return this.organization.deptId
    }
  },

  watch:{
    deptId:{
      handler(val){
        const po = this.options.filter(obj=>obj.value === val)
        this.position = po[0].children
        this.organization.positionId =  po[0].children[0].value
      },
      deep:true
    }
  },



  methods: {

    //分页条件添加
    async queryEmp(){
      if(this.orgId instanceof Array){
        this.params.deptId = this.orgId[0]
        this.params.positionId = this.orgId[1]
      }
      if(this.dateTime instanceof Array){
        this.params.startTime = this.dateTime[0]
        this.params.endTime = this.dateTime[1]
      }
      await this.pageEmp()
    },

    //分页 搜索
    async pageEmp(current){
      if (typeof(current) == 'undefined'){
        current = this.current
      }
      const {data:res} = await pageEmpSearch(current,this.pageSize,this.params)
      this.page = res.data
    },

    //下拉框动态刷新
    refresh(){
      this.$forceUpdate()
    },
    //状态下拉框
    async empTypeList(){
      const {data:res} = await getTypeList()
      this.typeList = res.data
    },
    //组织架构下拉框
    async selectOrg(){
      const {data:res} =await orgChart()
      this.options = res.org.children
    },


    //重置
    reset(){
      this.$router.go(0)
    },


    //通知
    notice(id){
      this.notice_flag = true
      this.id = id
    },
    async noticeBtn(){
      this.notices.id = this.id
      const res = await noticeEmail(this.notices)
      this.info(res)
      this.notice_flag = false
    },

    check(id){
      this.$router.push({path:'/personnel/info/'+id})
    },

    edit(id){

    },

    //调岗
    postTransfer(id){
      this.organization.id = id
      this.organization_flag = true
    },
    async organizationBtn(){
      const res = await transferPosition(this.organization)
      this.info(res)
      await this.pageEmp()
      this.organization_flag = false
    },

    //备注
    remarkInfo(id){
      this.remark.remarks = this.page.records.filter(obj=>obj.id === id)[0].remarks
      this.remarks_flag = true
      this.remark.id = id
    },
    async remarksBtn(){
      const res = await editRemarks(this.remark)
      this.info(res)
      await this.pageEmp()
      this.remarks_flag = false
    },

    //办理离职
    handleResignation(id){

    },

    //导出
    exportEmp(){

    },
    info(res){
      if(res.code === 200){
        this.$message({message: res.message, type: 'success'});
      }else {
        this.$message.error(res.message);
      }
    }

  },
  created() {
    this.pageEmp()
    this.empTypeList()
    this.selectOrg()
  }
}
</script>

<style lang="scss" scoped>
.run{
  &-core{
    margin:0 2rem 0 2rem;
  }
  &-card{
    margin-top: 2rem;
  }

}
</style>

<style scoped>
::v-deep .el-form--inline .el-form-item{
  margin: 0 1rem 0 1rem;
  float: left;
  display:inline-block;
  vertical-align:top
}


</style>
